<template>
  <div id="bottom2" style="height: 100%"></div>
</template>
<script>
import { Chart } from "@antv/g2";
export default {
  data() {
    return {};
  },
  methods: {
    initChart() {
      // 1.创建数据
      function getTypeColor(type) {
        if (type === "2022年01月05日") {
          return "#1890ff";
        }
        if (type === "2022年01月04日") {
          return "#2fc25b";
        }
        if (type === "2022年01月03日") {
          return "#facc14";
        }
      }
      const data = [
        {
          class: "2022年01月05日",
          country: "pm10",
          type: "1",
          value: 8.8,
        },
        { class: "2022年01月05日", country: "pm2.5", type: "1", value: 6.6 },
        {
          class: "2022年01月05日",
          country: "温度",
          type: "1",
          value: 2.29,
        },
        {
          class: "2022年01月05日",
          country: "风向",
          type: "1",
          value: 9.6,
        },
        { class: "2022年01月04日", country: "pm10", type: "1", value: 7.9 },
        { class: "2022年01月04日", country: "pm2.5", type: "1", value: 4.8 },
        { class: "2022年01月04日", country: "温度", type: "1", value: 2.03 },
        { class: "2022年01月04日", country: "风向", type: "1", value: 8.7 },
        {
          class: "2022年01月03日",
          country: "pm10",
          type: "1",
          value: 9.5,
        },
        {
          class: "2022年01月03日",
          country: "pm2.5",
          type: "1",
          value: 4.7,
        },
        {
          class: "2022年01月03日",
          country: "温度",
          type: "1",
          value: 2.46,
        },
        {
          class: "2022年01月03日",
          country: "风向",
          type: "1",
          value: 4.4,
        },
      ];

      // 2.
      const chart = new Chart({
        container: "bottom2",
        autoFit: true,
        height: 500,
        padding: [20, 20, 20, 70],
      });

      chart.data(data);
      chart.legend(false);
      chart.tooltip({
        showMarkers: false,
      });
      chart.facet("rect", {
        fields: ["class"],
        columnTitle: {
          offsetY: -15,
          style: {
            fontSize: 14,
            fontWeight: 300,
            fill: "#8d8d8d",
          },
        },
        eachView: (view, facet) => {
          view.coordinate().transpose();

          if (facet.columnIndex === 0) {
            view.axis("country", {
              tickLine: null,
              line: null,
            });
            view.axis("value", false);
          } else {
            view.axis(false);
          }
          const color = getTypeColor(facet.columnValue);
          view
            .interval()
            .adjust("stack")
            .position("country*value")
            .color("type", [color, "#ebedf0"])
            .size(20)
            .label("value*type", (value, type) => {
              if (type === "2") {
                return null;
              }
              const offset = value < 30 ? 10 : -4;
              return {
                offset,
              };
            });
          view.interaction("element-active");
        },
      });
      // 3.页面渲染
      chart.render();
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>